<template>
  <view class="payment-page">
    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-item">
        <text>订单号</text>
        <text>{{order.id}}</text>
      </view>
      <view class="info-item">
        <text>下单时间</text>
        <text>{{formatTime(order.createTime)}}</text>
      </view>
      <view class="info-item">
        <text>订单金额</text>
        <text class="price">¥{{order.total.toFixed(2)}}</text>
      </view>
    </view>
    
    <!-- 支付方式 -->
    <view class="payment-methods">
      <view class="section-title">选择支付方式</view>
      <radio-group @change="changePayment">
        <label 
          v-for="(method, index) in paymentMethods" 
          :key="index"
          class="method-item"
        >
          <view class="method-left">
            <image :src="method.icon" class="method-icon"></image>
            <text>{{method.name}}</text>
          </view>
          <radio :value="method.value" :checked="method.value === paymentMethod" />
        </label>
      </radio-group>
    </view>
    
    <!-- 支付按钮 -->
    <view class="pay-btn">
      <button @click="handlePayment">立即支付</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: '',
      order: {},
      paymentMethod: 'wechat',
      paymentMethods: [
        {name: '微信支付', value: 'wechat', icon: '/static/payment/wechat.png'},
        {name: '支付宝', value: 'alipay', icon: '/static/payment/alipay.png'},
        {name: '余额支付', value: 'balance', icon: '/static/payment/balance.png'}
      ]
    }
  },
  onLoad(options) {
    this.orderId = options.id;
    this.loadOrder();
  },
  methods: {
    loadOrder() {
      // 从本地存储获取订单
      const orders = uni.getStorageSync('orders') || [];
      this.order = orders.find(item => item.id === this.orderId) || {};
    },
    formatTime(timeStr) {
      if (!timeStr) return '';
      const date = new Date(timeStr);
      return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
    },
    changePayment(e) {
      this.paymentMethod = e.detail.value;
    },
    handlePayment() {
      uni.showLoading({
        title: '支付中...'
      });
      
      // 模拟支付过程
      setTimeout(() => {
        uni.hideLoading();
        
        // 更新订单状态
        const orders = uni.getStorageSync('orders') || [];
        const index = orders.findIndex(item => item.id === this.orderId);
        if (index !== -1) {
          orders[index].status = 2; // 2-已支付
          orders[index].paymentMethod = this.paymentMethod;
          orders[index].paymentTime = new Date().toISOString();
          uni.setStorageSync('orders', orders);
        }
        
        // 跳转到支付成功页面
        uni.redirectTo({
          url: `/pages/index/result?status=success&id=${this.orderId}`
        });
      }, 1500);
    }
  }
}
</script>

<style scoped>
.payment-page {
  padding: 15px;
}

.order-info {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.info-item .price {
  color: #1296db;
  font-weight: bold;
}

.payment-methods {
  background: #fff;
  padding: 0 15px;
  border-radius: 8px;
}

.section-title {
  padding: 15px 0;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

.method-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
}

.method-left {
  display: flex;
  align-items: center;
}

.method-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.pay-btn {
  position: fixed;
  bottom: 30px;
  left: 15px;
  right: 15px;
}

.pay-btn button {
  background: #1296db;
  color: #fff;
  border-radius: 25px;
}
</style>